<template>
  <div class="global-container">
    <Atable :tableData="tableData" :tableModel="tableModel">
      <template #viewPic="{ row }">
        <i
          class="el-icon-s-order"
          style="font-size: 24px"
          @click="viewPic(row)"
        ></i>
      </template>
      <template #actions="{ row }">
        <el-button
          v-if="row.status == 9"
          @click="handle(row)"
          type="primary"
          size="small"
          plain
          >处理</el-button
        >
        <el-button v-else @click="view(row)" type="primary" size="small"
          >查看</el-button
        >
      </template>
    </Atable>
    <el-dialog :visible.sync="dialogVisible" top="60px" width="600px">
      <img width="100%" :src="dialogSrc" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import Atable from '@/components/Table/Atable';
import businessApi from '@/api/business';
import apply from "@/assets/js/apply";
export default {
  components: { Atable },
  data() {
    return {
      // search, page params
      searchData: {
        pageNo: 1,
        pageSize: 10,
      },
      // records
      tableData: [],
      // table fields
      tableModel: [
        {
          type: 'index',
          label: '序号',
        },
        {
          prop: 'code',
          label: '事项编号',
        },
        {
          prop: 'name',
          label: '事项名称',
          width: '300px',
        },
        {
          prop: 'status',
          label: '审批状态',
          render: (row) => this.$dict('apply_status').get(row.status),
        },
        {
          prop: 'viewPic',
          label: '查看流程图',
          slot: 'viewPic',
        },
        {
          prop: 'actions',
          label: '操作',
          slot: 'actions',
        },
      ],
      // dialog info
      dialogVisible: false,
      dialogSrc: null,
    };
  },
  created() {
    this.getTable();
  },
  computed: {
    bussTypeCode() {
      return apply.applyCode;
    },
    bussTypeName() {
      return apply.applyName;
    },
  },
  methods: {
    async getTable() {
      this.tableData = [];
      // get data
      businessApi.getStepsList({
          ...this.searchData,
          // only get in processing data
          status: '1,3,9',
        })
        .then((res) => {
          if (res.records) {
            const records = res.records.map((item) => {
              return {
                ...item,
                code: this.bussTypeCode[item.bussType],
                name: this.bussTypeName[item.bussType],
              };
            });
            this.tableData = records;
          }
        });
    },
    view(row) {
      // view type
      let type = +row.status > 1 ? +row.status > 3
            ? 'process'
            : 'accept'
          : 'unhandled';
      // to view page
      this.$router.push({
        path: '/processMain',
        query: {
          type: type,
          id: row.id,
          bussType: row.bussType,
          userId: row.userId,
          disabled: true,
        },
      });
    },
    viewPic(row) {
      // show dialog
      const obj = {
        5: require('@/assets/img/step/step5.png'),
        6: require('@/assets/img/step/step6.png'),
      };
      this.dialogSrc = obj[+row.bussType];
      this.dialogVisible = true;
    },
    handle(row) {
      // to correction page
      this.$router.push({
        path: '/processMain',
        query: {
          type: 'correction',
          id: row.id,
          bussType: row.bussType,
          userId: row.userId,
          disabled: true,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
